<template>
  <div class="payment-info">
    <div class="header">
      <div class="back" @click="handleBack">
        <van-icon name="arrow-left" class="home-icon" />
      </div>
      <div class="title">Payment Info</div>
    </div>

    <div class="wrapper">
      <div class="content">
        <div class="empty-state" v-if="!cardList.length">
          <van-empty description="No payment information" class="empty-text" />
        </div>
        <div  class="card-list" v-if="cardList.length">
          <div  class="card-item" v-for="(item,index) in cardList" :key="index">
            <div  class="card-icon">₹</div>
            <div  class="card-number">{{ item.accountNumber }}</div>
          </div>
        </div>
      </div>

      <div class="button-container">
        <van-button
          round
          block
          type="primary"
          class="add-button"
          @click="handleAddPayment"
        >
          Add Payment Info
        </van-button>
      </div>
    </div>
  </div>
</template>

<script setup name="PaymentInfo">
import { ref } from "vue";
import { Icon as VanIcon, Button as VanButton, Empty as VanEmpty } from "vant";
import { useRouter } from "vue-router";
const router = useRouter();
import { UserApi } from '@/api/user.api';
const handleBack = () => {
  // Handle back navigation
  console.log("Navigate back to home");
  router.go(-1); // Go back to the previous page
};

const handleAddPayment = () => {
  // Handle add payment info action
  console.log("Add payment info clicked");
  router.push('/addpayment'); // Navigate to add payment page
  // Typically would navigate to add payment page
};
const cardList = ref([]);
const init = () => {
  // Fetch payment info data from API or local storage
  // Update cardList with fetched data
  UserApi.getBankCard().then((res) => {
    if (res.code == 200) {
      cardList.value = res.data; // Assuming API returns an array of payment info objects
    } else {
        cardList.value = [];
      // Handle error case
    }
  });
  
};
init();
</script>

<style scoped>
.payment-info {
  height: 100vh;
  background: #f5f5f5;
}

.header {
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f5f5f5;
}

.back {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.home-icon {
  width: 22px;
  height: 22px;
  font-weight: bold;
  margin-top: 6px;
}

.title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.content {
    padding: 12px 12px 68px;
    flex: 1;
}

.empty-state {
  text-align: center;
}

.empty-text {
  color: #969799;
  font-size: 14px;
  margin-top: 8px;
}

.button-container {
  padding: 12px;
  background: #f5f5f5;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.add-button {
  height: 44px;
  background: linear-gradient(90deg, #4460f6, #4c6fff);
  color: #fff;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}
.card-list {
    margin-bottom: 20px 
}
.card-item {
    background: white;
    border-radius: 10px;
    padding: 6px 12px;
    display: flex;
    align-items: center;
    margin-bottom: 6px;
    box-shadow: 0 2px 4px #00000005; 
}
.card-icon {
    width: 28px;
    height: 28px;
    background: #FF9500;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    margin-right: 10px;
}
.card-number {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}
</style>
